<template>
    <div class="indexList">

        <div class="sidebar">
            <div class="filter-group">
                <!-- <h3>🔍 工具分类</h3> -->
                <div>
                    <div class="officeItem" :class="toolsTypeItemValue=='0'?'is-active':''">
                        <i class="fas fa-box-open"></i>
                        <span>为你推荐</span>
                    </div>
                    <!-- <div class="officeItem" :class="toolsTypeItemValue=='1'?'is-active':''">
                        <i class="fas fa-box-open"></i>
                        <span>AI模板写作</span>
                    </div> -->
                    <div class="officeItem" @click="gotoChat()" :class="toolsTypeItemValue=='2'?'is-active':''">
                        <i class="fas fa-box-open"></i>
                        <span>DeepSeek R1</span>
                    </div>
                </div>
            </div>
            <!-- </div> -->
        </div>

        <div class="mainBox">
            <div class="search-box">
                <div class="scroll-container">
                    <div class="scroll-content">
                        <div v-for="(item, index) in items" :key="index" :class="['scroll-item', { active: currentIndex === index }]" v-html="item">
                        </div>
                    </div>
                </div>
                <div class="inputBox">

                    <el-input v-model="searchTerm" placeholder="输入工具名称或功能..." @input="searchTools">
                    </el-input>
                    <div class="btn">
                        <i class="el-icon-search" style="margin:3px 5px 0 0;font-size:20px" @click="searchTools"></i>
                        搜索模板
                    </div>
                </div>

                <div class="hotBox" v-if="hotAgentList.length>0">
                    <div>您可能要找:</div>
                    <!-- <div class="itemBox"> -->

                    <div class="hotItem" v-for="(item,index) in hotAgentList" :key="index" @click="searchTools(item.appName)">
                        <span v-if="index<4">🔥</span>
                        {{item.appName}}
                    </div>
                    <!-- </div> -->
                </div>

            </div>
            <div class="centerbox">

                <div class="tagBox">
                    <div class="tab" :class="tagValue==''?'dark':'plain'" @click="clickTag('')">
                        全部
                    </div>
                    <div class="tab" v-for="item in typeList" :key="item.label" :type="item.type" :class="tagValue==item.value?'dark':'plain'"
                        @click="clickTag(item.value)">
                        {{ item.label }}
                    </div>
                </div>

                <div class="tools-grid">
                    <!-- <div :gutter="20"> -->
                    <div v-for="(tool, index) in toolsList" :key="index" :xs="13" :sm="12" :md="8" :lg="6" @click="handleToolClick(tool,index)">
                        <el-card class="tool-card" :class="{ vip: tool.vip }">
                            <!-- <div class="tool-type">{{ tool.type }}</div> -->
                            <div class="tool-title">
                                <img :src="tool.logoUrl" alt="">
                                {{ tool.appName }}
                            </div>
                            <p class="tool-desc">{{ tool.appConcent }}</p>
                            <!-- <div class="tool-case">🖥️ 案例演示: {{ tool.case }}</div> -->
                            <div class="action-buttons">
                                <div type="text" @click="toggleFav(tool)" :class="{ active: tool.fav }">
                                    <!-- <i :class="['fas', tool.fav ? 'fa-heart' : 'fa-heart-o']"></i> -->
                                    最近生成{{ tool.useNum || 0 }}次
                                    <!-- 收藏 -->
                                </div>
                                <!-- <el-button type="text" @click="likeTool(tool)">
                                <i class="fas fa-thumbs-up"></i>
                                {{ tool.likes || 0 }}
                            </el-button> -->
                            </div>
                        </el-card>
                    </div>
                </div>
            </div>
            <!-- </div> -->
            <div class="aboutUs">
                <div @click="gotoAboutUs">
                    联系我们
                </div>
                <div>
                    <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="noopener noreferrer">蒙ICP备2024011908号-2</a>
                </div>
            </div>
        </div>
    </div>
</template>



<script>
import toolBox from "@/api/toolBox";
import { getToken } from '@/utils/auth'
import tools from '../components/tools'
export default {
    data() {
        return {
            searchTerm: '',
            activeFilter: 'all',
            tools: tools.tools,
            selectedMembership: 3, // 默认选择的会员类型
            membershipOptions: [],
            tagValue: '',
            toolsTypeItemValue: 0,
            toolsTypeList: [
                {
                    value: '0',
                    label: '为你推荐'
                },
                {
                    value: '1',
                    label: 'AI模板写作'
                },
                {
                    value: '2',
                    label: 'DeepSeek R1',
                    path: '/chat'
                },
            ],
            typeList: [
                {
                    value: '0',
                    label: '办公'
                },
                // {
                //     value: '1',
                //     label: '论文/报告'
                // },
                // {
                //     value: '2',
                //     label: 'PPT专区'
                // },
                {
                    value: '3',
                    label: '机关单位'
                },
                {
                    value: '4',
                    label: '学生助手'
                },
                {
                    value: '5',
                    label: '网文小说'
                },
                {
                    value: '6',
                    label: '短视频/剧本'
                },
                {
                    value: '7',
                    label: '小红书'
                },
                {
                    value: '8',
                    label: '抖音'
                },
                {
                    value: '9',
                    label: '教学帮手'
                },
                {
                    value: '10',
                    label: '分析/咨询'
                },
                {
                    value: '11',
                    label: '万能写作'
                },
                {
                    value: '12',
                    label: '文稿撰写'
                },
                {
                    value: '13',
                    label: '创作人'
                },
                {
                    value: '14',
                    label: '营销媒体'
                },
                {
                    value: '15',
                    label: '营销'
                },
                {
                    value: '16',
                    label: '中小学专区'
                },
                {
                    value: '17',
                    label: '生活娱乐'
                }
            ],
            hotAgentList: [],
            toolsList: [],
            items: ["文匠 AI 双核驱动：【办公文档】秒变专业，【短视频脚本】自带爆款基因，300 + 智能模板实时调用",
                "从【论文框架】到【营销方案】，AI 智能匹配教育部 / 4A 公司标准，关键内容精准度提升 91%",
                "机关单位专属：【公文起草】合规校验，【舆情分析】三重预警，政务写作安全系数 MAX",
                "教学革命：5 分钟生成【课堂设计】+【家长会发言】，智能适配新课标与 K12 考点",
                "爆文制造流水线：【小红书种草】×【网文大纲】协同创作，热门元素实时抓取更新",
                "企业级智能中枢：【商业计划书】财务模型自动生成，【竞品分析】数据可视化呈现",
                "全媒体覆盖方案：抖音【带货文案】智能优化，微信公众号【推文】原创度实时监测",
                "创作人的瑞士军刀：【剧本分镜】AI 构图指导，【小说人设】关系图谱自动生成",
                "生活智慧库：【法律文书】条款解读，【旅行攻略】智能生成，200 + 生活场景全覆盖",
                "学术加速器：【文献综述】核心观点提炼，【开题报告】创新性 AI 评分系统",
                "营销全链路：【活动策划】流程自动化，【转化文案】心理诱因分析，ROI 提升看得见",
                "教育双场景：【课件制作】互动元素植入，【试卷生成】难度系数智能调节",
                "机关写作双保险：【工作总结】数据穿透分析，【调研报告】对策建议 AI 推演",
                "内容创作者的 NASA：从【短视频分镜】到【直播话术】，流量密码实时解码",
                "企业效率套装：【会议纪要】智能提炼，【项目申报】政策匹配度预警",
                "文理双修助手：【实验报告】数据处理，【文学创作】风格迁移，复杂任务轻松分解",
                "新媒体矩阵引擎：【微博热搜】借势创作，【知乎问答】深度结构化输出",
                "全周期写作护航：【招投标文件】风险审查，【年终述职】业绩可视化包装",
                "智能创作生态：【行业分析】数据看板，【产品文案】FAB 智能拆解，创作耗时减少 80%",
                "跨界创作中枢：【短视频口播稿】×【教学案例】双向赋能，知识转化效率提升 300%"
            ],

            currentIndex: 0,
        };
    },
    computed: {
        // filteredTools() {
        //     let filtered = this.tools;
        //     if (this.activeFilter !== 'all') {
        //         filtered = filtered.filter(tool => tool.type === this.activeFilter);
        //     }
        //     if (this.searchTerm) {
        //         filtered = filtered.filter(tool =>
        //             tool.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
        //             tool.desc.toLowerCase().includes(this.searchTerm.toLowerCase())
        //         );
        //     }
        //     return filtered;
        // },
    },
    mounted() {
        console.log(tools);
        this.queryAllAgentM()
        this.gethHotAgent()
        this.items = this.items.map((item) =>
            item.replace(/【(.*?)】/g, '<span class="highlight">$1</span>')
        );

        this.startInterval();
        this.adjustContainerHeight();

    },
    beforeUnmount() {
    },
    methods: {
        filterTools(index) {
            this.activeFilter = index;
        },
        toggleFav(tool) {
            tool.fav = !tool.fav;
        },
        likeTool(tool) {
            tool.likes += 1;
        },
        switchItem() {
            this.currentIndex = (this.currentIndex + 1) % this.items.length;
        },
        startInterval() {
            setInterval(this.switchItem, 4500);
        },
        adjustContainerHeight() {
            const container = this.$el.querySelector('.scroll-container');
            const firstItem = this.$el.querySelector('.scroll-item');
            if (container && firstItem) {
                container.style.height = `${firstItem.offsetHeight}px`;
            }
        },

        // 点击工具单条
        handleToolClick(tool, index) {
            let that = this
            if (getToken()) {
                console.log('跳转');
                this.$router.push("/textDetail?appCode=" + tool.appCode);
            } else {
                this.$parent.handleToolClick();
            }
        },

        // 点击分类标签
        clickTag(value) {
            this.tagValue = value
            if (value) {
                toolBox.selectAgentByType({
                    appType: value
                }).then(val => {
                    if (val.code == 200) {
                        this.toolsList = val.data
                    }
                })
            }
            else {
                this.queryAllAgentM()
            }
        },

        // 搜索智能体
        searchTools(e) {
            this.searchTerm = e ? e : ''
            this.tagValue = ''
            if (this.searchTerm) {
                toolBox.querySearchAgentList({
                    search: this.searchTerm
                }).then(val => {
                    if (val.code == 200) {
                        this.toolsList = val.data ? val.data : []
                    }
                })
            }
            else {
                this.queryAllAgentM()
            }
        },
        // 首页热度搜索
        gethHotAgent() {
            toolBox.hotAgent().then(val => {
                this.hotAgentList = val.data ? val.data : []
            })

        },
        // 全部智能体
        queryAllAgentM() {
            toolBox.queryAllAgent().then(val => {
                if (val.code == 200) {
                    this.toolsList = val.data ? val.data : []
                }
            })
        },
        // 点击类型
        gotoChat() {
            if (getToken()) {
                this.$router.push('/chat');
            } else {
                this.$parent.handleToolClick();
            }
        },
        // 跳转联系我们
        gotoAboutUs() {
            window.open('/about-us')
        },

    },
};
</script>

<style lang="scss">
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
.deleteHistory {
    background-color: #1a202c;
}
.indexList {
    display: flex;
    height: calc(100vh - 60px);
    width: 100%;
    .sidebar {
        background: var(--glass);
        padding: 1.5rem;
        backdrop-filter: blur(10px);
        border-right: #ebebeb solid 1px;
        // box-shadow: 4px 0 6px -1px rgba(0, 0, 0, 0.05);
        height: calc(100vh- 60px);
        width: 240px;

        .filter-group {
            h3 {
                margin-bottom: 1rem;
                color: var(--primary);
                font-weight: 600;
                padding-left: 0.5rem;
            }
            .is-active {
                background: #a2cffc;
                // color: var(--primary);
                font-weight: 500;
                border-radius: 0.75rem;
                color: #000000 !important;
                // color: #666666 !important;
            }
            .officeItem {
                height: 50px;
                line-height: 50px;
                font-size: 14px;
                color: #999999;
                padding: 0 20px;
                list-style: none;
                cursor: pointer;
                position: relative;
                -webkit-transition: border-color 0.3s, background-color 0.3s,
                    color 0.3s;
                transition: border-color 0.3s, background-color 0.3s, color 0.3s;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                white-space: nowrap;
                display: flex;
                align-items: center;
                span {
                    margin-left: 10px;
                    font-size: 16px;
                }
                img {
                    width: 20px;
                    height: 20px;
                }
            }
            // .officeItem:hover{
            //     background: rgba(99, 102, 241, 0.05);
            //     border-radius: 0.75rem;
            // }
        }
    }
    .mainBox::-webkit-scrollbar {
        /* Chrome, Edge, Safari */
        display: none;
    }
    .mainBox {
        width: calc(100% - 240px);
        // padding: 2rem;
        // height: calc(100vh- 60px);
        height: 100%;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        background-color: rgb(255, 255, 255);
        position: relative;
        padding-bottom: 40px;
        .search-box {
            padding: 50px 0;
            background-color: #a2cffc;
            // background-image: url('../../assets/images/trianglify-lowres.png');
            background-size: 100% 100%;
            text-align: center;

            .scroll-container {
                // height: 110px;
                overflow: hidden;
                position: relative;
                // background: #f7f9fb;
                // border-radius: 12px;
                // padding: 25px;
                margin: 20px 0;
                .scroll-content {
                    position: absolute;
                    width: 100%;
                }

                .scroll-item {
                    position: absolute;
                    width: 100%;
                    // height: 110px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 24px;
                    color: #1a202c;
                    font-family: "微软雅黑", sans-serif;
                    font-weight: 600; /* 全局加粗 */
                    text-align: center;
                    line-height: 1.4;
                    opacity: 0;
                    transition: opacity 0.8s ease-in-out;
                }

                .scroll-item.active {
                    opacity: 1;
                }

                .highlight {
                    color: #2563eb;
                    font-size: 1em; /* 保持相同字号 */
                    font-weight: 700; /* 更高加粗度 */
                    margin: 0 4px;
                    vertical-align: baseline; /* 恢复默认对齐 */
                    position: relative;
                }
            }
            .inputBox {
                margin: 0 auto;
                width: 70%;
                position: relative;
                input {
                    // width: 100%;
                    padding: 2rem 1.5rem;
                    border: none;
                    border-radius: 5.5rem;
                    font-size: 1rem;
                    background: #fff;
                    backdrop-filter: blur(10px);
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
                    transition: all 0.3s ease;
                }
                .btn {
                    position: absolute;
                    right: 5px;
                    height: 55px;
                    top: 5px;
                    width: 150px;
                    border-radius: 200px;
                    background-color: #2563eb;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    cursor: pointer;
                    // height: ;
                }
            }
        }
        .hotBox {
            // text-align: center;
            // display: flex;
            // justify-content: center;
            margin: 0 auto;
            width: 70%;
            padding: 10px 0 20px 0;
            color: rgba(0, 0, 0, 0.26);
            font-size: 12px;
            overflow: hidden;
            .hotItem {
                height: 20px;
            }
            // .itemBox{

            div {
                color: rgba(0, 0, 0, 0.6);
                margin-left: 16px;
                float: left;
                cursor: pointer;
            }
            div:hover {
                color: #409eff;
            }
            // }
        }
        .aboutUs {
            position: absolute;
            bottom: 0;
            height: 30px;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            color: #666;
            font-size: 12px;
            div{
                margin: 0 10px;
            }
            div:nth-child(1){
                cursor: pointer;
            }
            div:nth-child(1):hover{
                color: #2563eb;
                cursor: pointer;
            }
        }
    }
    .centerbox {
        padding: 30px;
        .tagBox {
            overflow: hidden;
            .tab {
                margin-right: 10px;
                margin-top: 10px;
                cursor: pointer;
                padding: 5px 15px;
                float: left;
                border-radius: 5px;
            }
            .dark {
                background-color: #a2cffc;
                color: #fff;
            }
            .plain {
                // background-color:#fff;
                background-color: rgb(243, 243, 243);
                color: #555;
                // border: 1px solid #6366f1;
            }
        }
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .tool-card {
            background: var(--glass);
            padding: 10px 0 0px 0;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;

            &:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.1);
            }

            &.vip::after {
                content: "VIP";
                position: absolute;
                top: -10px;
                right: -30px;
                background: linear-gradient(45deg, #f59e0b, #fcd34d);
                color: white;
                padding: 1rem 2rem;
                transform: rotate(45deg);
                font-size: 0.8rem;
                font-weight: bold;
            }
        }

        .tool-type {
            background: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .tool-title {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            line-height: 1;
            img {
                width: 30px;
            }
        }

        .tool-desc {
            color: #4b5563;
            line-height: 1.6;
            margin-bottom: 1rem;
            display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            -webkit-line-clamp: 2; /* 限制显示两行 */
            overflow: hidden; /* 隐藏超出范围的内容 */
            text-overflow: ellipsis; /* 使用省略号 */
        }
        .action-buttons {
            color: #999;
            font-size: 14px;
        }

        .tool-case {
            background: rgba(255, 255, 255, 0.6);
            padding: 1rem;
            border-radius: 0.75rem;
            margin: 1rem 0;
            font-size: 0.9rem;
            color: #374151;
            position: relative;

            &::before {
                content: "🖥️ 案例演示";
                display: block;
                font-size: 0.8rem;
                color: var(--accent);
                margin-bottom: 0.5rem;
            }
        }
    }
}
</style>